<template>
  <el-descriptions
    :title="title"
    :colon="colon"
    :labelClassName="labelClassName"
    :contentClassName="contentClassName"
    :labelStyle="labelStyle"
    :contentStyle="contentStyle"
    :size="size"
    :direction="direction"
    :column="column"
    :border="border"
  >
    <!-- extra slot 操作区文本，显示在右上方 -->
    <template slot="extra" v-if="extra">
      <slot name="extra"></slot>
    </template>
    <template v-for="(item, index) in titleData || keyData">
      <el-descriptions-item
        v-if="emptyShowHandle(item)"
        :key="index"
        :span="item.span || 1"
        :contentStyle="item.contentStyle"
        :labelClassName="item.labelClassName"
        :contentClassName="item.contentClassName"
        :labelStyle="item.labelStyle"
        :label="item.label"
      >
        <!-- 插槽 -->
        <template v-if="item.type === 'slot'">
          <slot :data="{ data, item }" :name="item.prop || item.field"></slot>
        </template>
        <!-- el-link 组件 -->
        <template v-else-if="item.type === 'link'">
          <el-link
            :type="item.config.type || 'primary'"
            :underline="item.config.underline"
            :disabled="item.config.disabled"
            :href="item.config.href"
            :target="item.config.target"
            :icon="item.config.icon"
            @click="item.config.click && item.config.click(data)"
            >{{ data[item.prop || item.field] }}</el-link
          >
        </template>
        <!-- el-tag 组件 -->
        <template v-else-if="item.type === 'tag'">
          <div style="display: flex; flex-direction: row; line-height: 30px">
            <el-tag
              style="margin: 5px 5px 0 0"
              v-for="(tag, index) in data[item.prop]"
              :key="index"
              :type="item.config && item.config.type"
              :closable="item.config && item.config.closable"
              :disable-transitions="item.config && item.config.disableTransitions"
              :hit="item.config && item.config.hit"
              :color="item.config && item.config.color"
              :size="item.config && item.config.size"
              :effect="item.config && item.config.effect"
              >{{ item.formatter ? item.formatter(tag) || "-" : tag }}</el-tag
            >
          </div>
        </template>
        <!-- 类型是text或者textarea  -->
        <template v-else-if="inputType.includes(item.type) && !hideProp[item.prop]">
          <el-input
            :show-word-limit="item.showWrodLimit"
            :type="item.type"
            :maxlength="item.maxlength"
            :minlength="item.minlength"
            :clearable="item.clearable || true"
            :show-password="item.showPassword"
            :prefix-icon="item.prefixicon"
            :suffix-icon="item.suffixIcon"
            :rows="item.rows"
            :autosize="item.autosize"
            :autocomplete="item.autocomplete"
            :name="item.name"
            :max="item.max"
            :readonly="item.readonly"
            :min="item.min"
            :step="item.step"
            :resize="item.resize"
            :autofocus="item.autofocus"
            :form="item.form"
            :label="item.label"
            :tabindex="item.tabindex"
            :validate-event="item.validateEvent"
            :disabled="item.disabled || false"
            :placeholder="item.placeholder || `请输入${item.label}`"
            v-model="data[item.prop || item.field]"
            @focus="item.focus && item.focus($event)"
            @blur="item.blur && item.blur($event)"
            @clear="item.clear && item.clear($event)"
            @change="item.change && item.change($event)"
            @input="item.input && item.input($event)"
          ></el-input>
        </template>
        <!-- 下拉框 -->
        <template v-else-if="selectType.includes(item.type)">
          <el-select
            v-model="data[item.prop || item.field]"
            default-first-option
            :clearable="item.clearable || true"
            :disabled="item.disabled || false"
            :remote="item.remote"
            :loading="loadingProp[item.prop || item.field]"
            :allow-create="item.allowCreate"
            :multiple="item.multiple"
            :filterable="item.filterable"
            @visible-change="item.visibleChange && item.visibleChange($event)"
            @remove-tag="item.removeTag && item.removeTag($event)"
            @clear="item.clear && item.clear($event)"
            @blur="item.blur && item.blur($event)"
            @focus="item.focus && item.focus($event)"
            @change="item.change && item.change($event)"
            :remote-method="
              item.remoteMethod ||
              ((query) => {
                remoteMethod(query, item.prop);
              })
            "
            :placeholder="item.placeholder || `请选择${item.label}`"
          >
            <el-option
              v-for="(oItem, okey) in item.option || item.options || item.optionData || optionData[item.prop] || []"
              :key="okey"
              :label="(item.optionProps && oItem[item.optionProps.label]) || oItem.label"
              :value="(item.optionProps && oItem[item.optionProps.value]) || oItem.value"
            >
            </el-option>
          </el-select>
        </template>
        <!-- 默认 -->
        <template v-else>
          {{
            (item.formatter && item.formatter(data)) ||
            (data[item.prop] == "*" && "无权限") ||
            data[item.field || item.prop] ||
            (border ? (data[item.field || item.prop] === 0 ? 0 : "") : data[item.field || item.prop] === 0 ? 0 : "-")
          }}
        </template>
      </el-descriptions-item>
    </template>
  </el-descriptions>
</template>

<script>
export default {
  name: "secDesc",
  props: {
    hideProp: {
      type: Object,
      default: () => {
        return {};
      },
    },
    emptyShow: {
      type: Boolean,
      default: true,
    },
    size: String,
    title: String,
    colon: {
      type: Boolean,
      default: false,
    },
    direction: String,
    column: {
      type: Number,
      default: 3,
    },
    extra: Boolean,
    labelClassName: String,
    contentClassName: String,
    labelStyle: Object,
    contentStyle: Object,
    border: {
      type: Boolean,
      default: true,
    },
    loadingProp: {
      type: Object,
      default: () => {
        return {};
      },
    },
    data: Object,
    optionData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    titleData: Array,
    keyData: Array,
  },
  components: {},
  data() {
    return {
      selectType: ["select", "option"],
      inputType: ["text", "textarea"], //input 输入框组件 类型
    };
  },
  computed: {},
  mounted() {},
  methods: {
    emptyShowHandle(item) {
      if (!this.emptyShow) {
        return this.data[item.prop] ? true : false;
      }
      return true;
    },
    /**
     * @函数功能:远程搜索
     * @参数输入:query:string 输入的值 prop:string 字段名
     * @函数返回:
     */
    remoteMethod(query, prop) {
      console.log(query, prop);
      this.$emit("remoteMethod", { query, prop });
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.el-descriptions {
  margin-bottom: 20px;
}
</style>
